<template>
    <view class="article-detail">
        <view class="content_view" v-html="articleDetail.details"></view>
        <view class="detail-bottom" style="padding-bottom: env(safe-area-inset-bottom)">
            <view class="detail_bottom-main">
                <view class="detail_bottom-item" @click="goCollect()">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/fav.png" mode="" v-if="status == 0"></image>
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/fav_sel.png" mode="" v-if="status == 1"></image>
                    <text>{{ articleDetail.collectionCount }}</text>
                </view>
                <view class="detail_bottom-item" style="position: relative">
                    <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/share1.png" mode=""></image>
                    <text>分享</text>
                    <button class="wxBtn" open-type="share"></button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            id: "",
            articleDetail: {},
            status: 0,
            form: {
                id: "",
                status: 1,
            },
        };
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    onLoad(options) {
        this.id = options.id;
        this.request.httpTokenRequest(`/mp-api/wx/article/details/${this.id}`, null, "POST", true).then((res) => {
            if (res.code != 0) {
                this.helper.showToast(res.message);
                return;
            }
            this.articleDetail = res.data;
            this.articleDetail.details = this.articleDetail.details.replace(
                /<img/g,
                "<img style='max-width:100%;height:auto;'",
            );
            this.status = res.data.collectStatus;
            uni.setNavigationBarTitle({
                title: this.articleDetail.title,
            });
        });
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo", "logout"]),
        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == "" || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == "" || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
                let curRoute = routes[routes.length - 1].route; // 获取当前页面路由，也就是最后一个打开的页面路由
                console.log(curRoute, "pppp");
                uni.navigateTo({
                    url: "/pages/login/login",
                });
                return false;
            }
            return true;
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: "Wexin",
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest("/mp-api/wx/user/update", postData, "POST", false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == "" || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: "/pages/login/login",
                        });
                    }
                    this.requestUser();
                }
            });
        },
        goCollect() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            this.form.id = this.articleDetail.id;
            if (this.status == 1) {
                uni.showModal({
                    cancelText: "取消",
                    confirmText: "确定",
                    title: "是否确认取消收藏此文章？",
                    success: (res) => {
                        if (res.confirm) {
                            if (this.status == 1) {
                                this.form.status = 0;
                                this.request
                                    .httpTokenJsonRequest("/mp-api/wx/article/collect", this.form, "POST", true)
                                    .then((res) => {
                                        if (res.code != 0) {
                                            this.helper.showToast(res.message);
                                            return;
                                        }
                                        this.helper.showToast("取消收藏");
                                        this.status = 0;
                                        if (this.articleDetail.collectionCount > 0) {
                                            this.articleDetail.collectionCount = this.articleDetail.collectionCount - 1;
                                        }
                                    });
                            }
                        }
                    },
                });
            } else {
                if (this.status == 0) {
                    this.form.status = 1;
                    this.request
                        .httpTokenJsonRequest("/mp-api/wx/article/collect", this.form, "POST", true)
                        .then((res) => {
                            if (res.code != 0) {
                                this.helper.showToast(res.message);
                                return;
                            }
                            this.helper.showToast("收藏成功");
                            this.status = 1;
                            this.articleDetail.collectionCount = this.articleDetail.collectionCount + 1;
                        });
                }
            }
        },
    },
};
</script>

<style lang="scss">
body,
.detail {
    height: 100%;
    min-height: 100vh;
    background-position: center;
}
uni-page-body,
html {
    height: 100%;
}
.article-detail {
    width: 100%;
    height: 100%;
    position: relative;
    .detail-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }
    .detail-bg image {
        width: 100%;
        height: 100%;
    }
    .detail-bottom {
        width: 100%;
        height: 180rpx;
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
    }
    .detail_bottom-main {
        width: 348rpx;
        display: flex;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 50rpx;
        box-shadow: -10rpx 0 20rp 0x rgba(0, 0, 0, 0.05);
    }
    .detail_bottom-item {
        width: 50%;
        text-align: center;
        padding: 5rpx 0;
        margin: 10rpx 0 0;
    }
    .detail_bottom-item image {
        width: 48rpx;
        height: 48rpx;
    }
    .detail_bottom-item text {
        display: block;
        color: #666;
        font-size: 20rpx;
    }
    .content_view {
        margin: 30rpx;
        padding-bottom: 180rpx;
        width: calc(100% - 60rpx);
    }
    .wxBtn {
        background-color: transparent;
        width: 100%;
        height: 100%;
        flex: 1;
        top: 0;
        left: 0;
        position: absolute;
        z-index: 200;
    }
    button::after {
        border: none;
    }
    .ql-align-right {
        text-align: right;
    }
    .ql-align-center {
        text-align: center;
    }
    .ql-syntax {
        background-color: #23241f;
        color: #f8f8f2;
        overflow: visible;
    }
    .ql-indent-1 {
        padding-left: 3em;
    }
}
</style>
